<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item prop="Desc" label="转移原因">
            <el-input type="textarea" v-model="ruleForm.Desc"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import { ElMessage } from 'element-plus'
    import transferinfoapi from "../../api/transferinfoapi"
    import userprocedureapi from '../../api/userprocedureapi'

    const { id } = defineProps({
        id: {
            type: Number,
            required: true
        }
    })
    const emit = defineEmits(['onSave'])

    const userProcedure = ref(null);

    interface RuleForm {
        ProcedureId: Number
        Desc: string
    }

    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive<RuleForm>({
        ProcedureId: id,
        Desc: ""
    })

    const rules = reactive<FormRules<RuleForm>>({
        Desc: [
            { required: true, message: '请输入延期备注', trigger: 'blur' },
        ]
    });

    userprocedureapi.get(id).then((res: any) => {
        userProcedure.value = res.data;
    });



    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                transferinfoapi.add(ruleForm).then((res: any) => {
                    if (res.code == 1) {
                        ElMessage.success({
                            message: "成功"
                        });
                    } else {
                        ElMessage.error({
                            message:"失败"
                        })
                    }
                    emit("onSave");
                })
            }
        })
    }

</script>


<style></style>